<template>
    <div>
        <appdialog
            ref="dialog"
			:visible="false" 
            title="修改菜单"
			width="40%"
			@confirm="confirmAdd"
			@cancle="cancleAdd">
            
            <el-form :model="ruleForm" ref="ruleForm" :rules="rules" label-width="100px">
                <el-form-item label="上级菜单：">
                     <el-input value="根目录" :disabled="true" v-if="parentId =='0' || ruleForm.parentId == '0'"></el-input>

                       <div v-else   style="border: 1px solid #dcdfe6;width: 100%; background-color: #f5f7fa;">
                         <span  style="margin-left:10px;font-size:10px;color:#c0c4cc">{{parentName}}</span>
                        </div>
                </el-form-item>

                <el-form-item label="菜单名称：" prop="menuName">
                    <el-input v-model="ruleForm.menuName"></el-input>
                </el-form-item>

                <el-form-item label="菜单类型：" prop="type">
                    <el-radio-group v-model="ruleForm.type">
                        <el-radio :label="0">目录</el-radio>
                        <el-radio  :label="1">菜单</el-radio>
                        <!-- <el-radio :label="2">按钮</el-radio> -->
                    </el-radio-group>
                </el-form-item>
                
                <el-form-item label="排序号：" prop="orderNum">
                    <el-input v-model.number="ruleForm.orderNum"
                            ></el-input>
                </el-form-item>

                <el-form-item label="连接地址：" prop="url" >
                    <el-input v-model="ruleForm.url"></el-input>
                </el-form-item>


                <el-form-item label="状态：" prop="status">
                    <el-switch v-model="statusSwitch"
                            active-text="启用"
                            inactive-text="禁用"></el-switch>
                </el-form-item>

                <el-form-item label="图标：" prop="iconfont">
                    <span>{{ruleForm.icon}}</span>
                    <el-button @click="handleicon">选择图标</el-button>
                    <el-button @click="handleClear">清空</el-button>
                </el-form-item>

                <icon-dialog ref="icondialog" @handleIcon="handleIcon"></icon-dialog>
            </el-form>
        </appdialog>
    </div>
</template>
<script>
import appdialog from "@/view/components/dialog/dialog";
import iconDialog from './iconDialog'
import { updateMenu, getMenu } from "@/service/swagger/MenuController"
export default {
    components: {
        appdialog,
        iconDialog
    },
    data() {
        return {
            parentName: "",
            parentId: "",
            ruleForm: {
                parentId: "0",
                menuName: "",
                url: "",
                orderNum: "",
                type: "",
                status: "1",
                id: "",
                icon: '',
            },
            rules: {
                type: [
                    { required: true, message: '请选择菜单类型', trigger: 'change' }
                ],
                menuName: [
                    { required: true, message: '请输入菜单名称', trigger: 'blur' }
                ],
                orderNum: [
                    { type: 'number', message: '排序号必须为数字值' }
                ]
            }
        }
    },
    computed: {
        statusSwitch: {
            get: (vm) => {
                const switchHash = {
                    "1": true, // 1 是启用
                    "2": false // 2 是不启用
                }
                return switchHash[vm.ruleForm.status];
            },
            set: function (v) {
                this.ruleForm.status = v ? "1" : "2";
            }
        },
    },
    methods: {
        open(row) {
            if (row) {
                getMenu(row.id).then(ret => {
                    if (ret.code === 0) {
                        this.ruleForm = {
                            parentId: ret.data.parentId,
                            menuName: ret.data.menuName,
                            url: ret.data.url,
                            orderNum: ret.data.orderNum,
                            type: ret.data.type,
                            status: ret.data.status,
                            id: ret.data.id,
                            icon: ret.data.icon,
                        }

                        this.parentId = ret.data.parentId
                        this.parentName = ret.data.parentName
                    }
                })


            }
            this.$refs.dialog.open();

        },
        confirmAdd() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    this.editMenu()
                } else {
                    setTimeout(() => {
                        this.open()
                    }, 50)
                    return false;
                }
            })
        },
        //编辑
        editMenu() {
            updateMenu(this.ruleForm).then(ret => {
                if (!ret.code) {
                    this.$message({
                        message: '修改成功!',
                        type: 'success',
                        duration: '2000'
                    })
                    this.$emit('handleRefsh')
                } else {
                    this.$message({
                        message: '修改失败!',
                        type: 'error'
                    })
                }
            })
        },
        handleicon() {
            this.$refs.icondialog.open()
        },
        handleIcon(data) {
            this.ruleForm.icon = data
        },
        handleClear(){
            this.ruleForm.icon = ''
        },
        cancleAdd() {
            this.$refs.ruleForm.clearValidate(["type", "menuName", "orderNum"])
            this.ruleForm = {
                parentId: "0",
                menuName: "",
                url: "",
                orderNum: "",
                type: "",
                status: "1",
                id: "",
                icon: "",
            }
        }


    }
}
</script>
